<template>
  <view class="study-container">
    <view v-for="item in Info" :key="item.sid" class="study-item">
      <image :src="item.icon"></image>
      <view class="meta">
        <text class="title">{{ item.title }}</text>
        <text class="progress"
          >已学习{{ item.study_hour }}/{{ item.total_hour }}课时</text
        >
      </view>

      <!-- 组件 -->
      <view class="circle">
        <van-circle
          :color="item.color"
          :value="item.study_progress"
          layer-color="#f3f3f3"
          :size="50"
        >
          <!-- { 'font-size': '12px;', color: item.color } -->
          <text :style="{ color: item.color, 'font-size': '12px;' }"
            >{{ item.study_progress }}%</text
          >
        </van-circle>
        <!-- <van-circle color="{{item.color}}" size="50" layer-color="#f3f3f3" value="{{item.study_progress}}" >
        <text style="font-size:12px;color:{{item.color}}; "  >{{item.study_progress}}%</text>
      </van-circle> -->
      </view>
    </view>
    <!-- </view> -->
    <!-- 判断有无学习进度 -->
    <view v-if="isEmpty">
      <text class="no-study-tip">您还没有任何学习记录哦，赶快去学习吧~</text>
    </view>
  </view>
</template>

<script>
import request from "../utils/util";
export default {
  data() {
    return {
      Info: [],
    
      isEmpty: false,
    };
  },
  onShow(){
 this.progressData();
  },
  onLoad() {
    this.progressData();
  },
  methods: {
    async progressData() {
      const res = await request({
        url: "study/progress",
      });
      console.log(res, 1245);
      this.progress=res.data.message.study_progress
      console.log(this.progress)
      res.data.message.forEach((item) => {
        if (item.study_progress <= 30) {
          item.color = "#ff0000";
        } else if (item.study_progress <= 80) {
          item.color = "#ff783b";
        } else {
          item.color = "#b4d66e";
        }
      });

      this.Info = res.data.message;
      if (res.data.message.length === 0) {
        this.isEmpty = true;
      }
    },
  },
 
};
</script>

<style lang="less" scoped>
.study-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 32rpx;
  align-items: center;
  position: relative;
}

.study-item {
  margin-top: 32rpx;
  background-color: #fff;
  border-radius: 12rpx;
  width: 686rpx;
  height: 220rpx;
  display: flex;
  align-items: center;
}

.study-item image {
  width: 108rpx;
  height: 108rpx;
  margin-left: 50rpx;
}

.study-item .meta {
  flex: 1;
  margin-left: 50rpx;
  display: flex;
  flex-direction: column;
}

.study-item .meta .title {
  font-size: 30rpx;
  color: #333333;
}

.study-item .meta .progress {
  margin-top: 10rpx;
  font-size: 22rpx;
  color: #a8a8a8;
}

.circle {
  width: 109rpx;
  height: 109rpx;
  margin-right: 56rpx;
}

.no-study-tip {
  margin-top: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500rpx;
  font-size: 15px;
}
</style>
